import React from 'react'
import {Button} from 'primereact/button'
import {TabView, TabPanel} from 'primereact/tabview'
import {Dialog} from 'primereact/dialog'

import OverView from './tab/OverView'
import Assets from './tab/Assets'
import Transactions from './tab/Transactions'
import BidNames from './tab/BidNames'
import ChildAccounts from './tab/ChildAccounts'
import Permission from './tab/Permission'
import VoteManager from './tab/VoteManager'
import Actions from './tab/Actions'

import TransferDlog from './tab/dlog/transferDlog'
import ResourcesDlog from './tab/dlog/resourcesDlog'

class Wallet extends React.Component {
    constructor() {
        super()
        this.state = {
            activeIndex: 0,
            transferVisible: false,
            resourcesVisible: false
        }
    }

    render() {
        return [
            <div className="p-g">
                <div className="p-g-10">
                    <p>zuowen123123 2018:18:18</p>
                </div>
                <div className="p-g-1">
                    <Dialog
                        visible={this.state.transferVisible}
                        width="700px"
                        modal={true}
                        onHide={(e) => this.setState({transferVisible: false})}
                    >
                        <TransferDlog/>
                    </Dialog>
                    <Button label='转账' icon='pi pi-refresh'
                            onClick={(e) => this.setState({transferVisible: true})}/>
                </div>
                <div className="p-g-1">
                    <Dialog
                        visible={this.state.resourcesVisible}
                        width="700px"
                        modal={true}
                        onHide={(e) => this.setState({resourcesVisible: false})}
                    >
                        <ResourcesDlog/>
                    </Dialog>
                    <Button label='资源' icon='pi pi-cloud'
                            onClick={(e) => this.setState({resourcesVisible: true})}/>
                </div>
            </div>,

            <div className='p-g'>
                <div className='p-g-12'>
                    <TabView activeIndex={this.state.activeIndex}
                             onTabChange={(e) => this.setState({activeIndex: e.index})}>
                        <TabPanel header="总览">
                            <OverView/>
                        </TabPanel>
                        <TabPanel header="资产">
                            <Assets/>
                        </TabPanel>
                        <TabPanel header="交易记录">
                            <Transactions/>
                        </TabPanel>
                        <TabPanel header="名字拍卖">
                            <BidNames/>
                        </TabPanel>
                        <TabPanel header="子账号">
                            <ChildAccounts/>
                        </TabPanel>
                        <TabPanel header="权限组">
                            <Permission/>
                        </TabPanel>
                        <TabPanel header="投票纪录">
                            <VoteManager/>
                        </TabPanel>
                        <TabPanel header="其他操作">
                            <Actions/>
                        </TabPanel>
                    </TabView>
                </div>
            </div>
        ]
    }
}

export default Wallet